<template>
    <div class="bigbox">
        <!-- 头部开始 -->
        <div class="header">
            <!-- 系统图标及系统名称 -->
            <div class="headerLeft">
                <img style="width: 60px; height: 60px; margin-left: 90px;border-radius: 25px;" src="../assets/logo.jpg">
                <span style="font-size: xx-large; line-height: 52px; margin-left: 26px;">尸魂界管理系统</span>
            </div>
            <div class="headerRight">
                <img style="border-radius: 30px;width: 50px;height: 50px;margin-left: 90px;" :src="loginUser.avatar">
                <span style="font-size: 16px; line-height: 40px; margin-left: 14px;">{{ loginUser.nickName }}</span>
            </div>
        </div>
        <!-- 头部结束 -->

        <!-- 内容区开始 -->
        <div class="content">
            <!-- 侧边栏开始 -->
            <div class="sidebar">
                <!-- 菜单开始 -->
                <!-- el-menu的router是激活路由的功能 -->
                <el-menu router style="flex: 1;background-color: #f0f8ff;"
                    :default-active="router.currentRoute.value.path" :default-openeds="['1']"
                    class="el-menu-vertical-demo" :collapse="isCollapse">
                    <!-- 滚动条开始 -->
                    <el-scrollbar style="flex: 1;" max-height="760px">
                        <el-sub-menu index="#">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span v-if="!isCollapse">菜单1</span>
                            </template>
                            <el-menu-item-group style="background-color: #d3e6f7;">
                                <template #title><span>分组1</span></template>
                                <el-menu-item index="#">子菜单1</el-menu-item>
                                <el-menu-item index="#">子菜单2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group style="background-color: #d3e6f7;">
                                <template #title><span>分组2</span></template>
                                <el-menu-item index="##">子菜单1</el-menu-item>
                                <el-menu-item index="##">子菜单2</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="###" style="background-color:#d3e6f7">
                                <template #title><span>菜单2</span></template>
                                <el-menu-item index="###1" style="background-color:#bdd1e3">子菜单1</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <el-menu-item index="2">
                            <el-icon>
                                <Message />
                            </el-icon>
                            <template #title v-if="!isCollapse">菜单2</template>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <el-icon>
                                <CloseBold />
                            </el-icon>
                            <template #title v-if="!isCollapse">不可点击</template>
                        </el-menu-item>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span v-if="!isCollapse">用户管理</span>
                            </template>
                            <el-menu-item index="/home/employee">员工信息</el-menu-item>
                            <el-menu-item index="">个人信息</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="5">
                            <el-icon>
                                <User />
                            </el-icon>
                            <template #title v-if="!isCollapse">菜单5</template>
                        </el-menu-item>
                        <el-menu-item index="6">
                            <el-icon>
                                <Share />
                            </el-icon>
                            <template #title v-if="!isCollapse">菜单6</template>
                        </el-menu-item>
                        <el-menu-item index="7">
                            <el-icon>
                                <StarFilled />
                            </el-icon>
                            <template #title v-if="!isCollapse">菜单7</template>
                        </el-menu-item>
                        <el-menu-item index="/login">
                            <el-icon>
                                <CloseBold />
                            </el-icon>
                            <template #title v-if="!isCollapse">退出登录</template>
                        </el-menu-item>
                    </el-scrollbar>
                    <!-- 滚动条结束 -->
                </el-menu>
                <!-- 菜单结束 -->
            </div>
            <!-- 侧边栏结束 -->

            <!-- 详情区开始 -->
            <div class="detail">
                <router-view />
            </div>
            <!-- 详情区结束 -->
        </div>
        <!-- 内容区结束 -->
    </div>
</template>

<script setup>
import router from '@/router';
import { useUserStore } from '@/stores/user';
import { onMounted, ref } from 'vue';

let isCollapse = ref(false); // 控制菜单的折叠与展开状态。
const { loginUser } = useUserStore()

// const loginName = userStore.loginUser.uname
onMounted(() => {
    console.log(loginUser);
    console.log(loginUser.avatar);

})
</script>

<style scoped>
.bigbox {
    width: 100vw;
    height: 100vh;
    background-color: darkgray;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    height: 85px;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.headerLeft {
    display: flex;
}

.headerRight {
    display: flex;
    margin-right: 60px;
}

.content {
    flex: 1;
    display: flex;
    /* 确保侧边栏不会超出视口 */
    overflow: hidden;
}

.sidebar {
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    margin-right: 3px;
}

.detail {
    flex: 1;
    background-color: aliceblue;
}
</style>